<template>
	<div style="width: 100%;display: flex;flex-wrap: wrap;justify-content: center;height: 180px;">
		
		<div id="mainc" style="width:200px;height: 100px;"></div>
		<div style="margin-top: 0px;display: flex;align-items: center;width: 100%;justify-content: center;" >
			<div style="display: flex ;align-items: center;margin-bottom: 10px;justify-content: center;flex-wrap: wrap;width: 100px;">
				<div style="width: 15px;height: 8px;background-color:#00dc00 ;margin-right: 5px;border-radius: 3px;">
					
				</div>
				{{wenmsg.jieyue.name}}:{{wenmsg.jieyue.value}}
			</div>
			<div>/</div>
			
			<div style="display: flex ;align-items: center;margin-bottom: 10px;flex-wrap: wrap;justify-content: center;width: 90px;">
				<div style="width: 15px;height: 8px;background-color:#1890fe;margin-right: 5px;border-radius: 3px;">
				</div>
				{{wenmsg.zongshu.name}}:{{wenmsg.zongshu.value}}
			
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name:"tubiaoc",
		props: ['wenxianmsg'],
		  data(){
			  return{
			  	wenmsg:{}
			  }
		  },
		  watch:{
			  wenxianmsg(oldval,newval){
				  this.getmsg()
			  }
		  },
		  created () {
			
		  },
		  mounted(){
			this.getmsg()
		  },
		  methods:{
			  async getmsg(){
				  this.wenmsg=this.wenxianmsg
				  let that =this
				  if( this.wenmsg){
					  setTimeout(res=>{
						  that.getbiao()
					  },500)
					 
				  }
				  
			  },
			  getbiao(){
				let c=this.wenmsg
				  console.log('这是c',c)
				  let current = c.jieyue.value;// 当前用量
				    let all = c.zongshu.value;// 总量
					let vala=c.zhanbi.value
				var myChartc = echarts.init(document.getElementById('mainc'));
				  let option = {
					  title: {
					    text: vala	,
					    left: 'center',
					    top: 75,
					    textStyle:{
					      color:'#1890fe',
						  fontSize:'14px'
					    }
					  },
				        series: [
				            {
				                type: 'pie',
				                label: {
				                    show: false
				                },
				                center: ['50%', '100%'],
				                radius: ['84%', '100%'],
				                startAngle: 180,
								
				                data: [
				                    {
				                        name: '',
				                        value: current,
				                        itemStyle: {
				                            color: '#00dc00'
				                        }
				                    },
				                    {
				                        name: 'rest',// 实际显示部分是总量-用量
				                        value: all - current,
				                        itemStyle: {
				                            color: '#1890fe'
				                        }
				                    },
				                    {
				                        name: 'bottom',
				                        value: all,
				                        itemStyle: {
				                            color: 'transparent'
				                        }
				                    },
				                ]
				            }
				        ]
				    };
				        // 使用刚指定的配置项和数据显示图表。
				        myChartc.setOption(option);
			  }
		  },
		
	}
</script>

<style>
</style>